<template>
  <ex-dialog
    width="800px"
    class="ex-diolog"
    title="自动添加配置"
    :visible="visible"
    @closeDialog="handleClose"
  >	
		<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="0" class="demo-ruleForm">
      <div class="inpList">
        <el-form-item label="" prop="inviteTime">
          <div class="hang">
             <div class="mar-r-10">每过</div><el-input type="text" v-model="ruleForm.inviteTime" autocomplete="off" placeholder="请输入时间（最少为60s）"></el-input><div class="mar-r-10">秒，增加</div>
          </div>
        </el-form-item>
        <el-form-item label="" prop="inviteMin">
          <div class="hang">
            <el-input type="text" v-model="ruleForm.inviteMin" autocomplete="off" placeholder="请输入数量"></el-input><div class="mar-r-10">至</div>
          </div>
        </el-form-item>
        <el-form-item label="" prop="inviteMax">
          <div class="hang">
            <el-input type="text" v-model="ruleForm.inviteMax" autocomplete="off" placeholder="请输入数量"></el-input><div class="mar-r-10">个虚拟邀请人数</div>
          </div>
        </el-form-item>
      </div>
			<el-form-item>
				<el-button type="primary" @click="submitForm('ruleForm')" :loading="loading">确认</el-button>
				<el-button @click="handleClose('ruleForm')">取消</el-button>
			</el-form-item>
		</el-form>
  </ex-dialog>
</template>
<script>
// components
import Loading from '@/components/Loading/index'
// api
import {
  addRecord,
  recordInfo
} from '@/api/inviteNew'

export default {
  components: {
    Loading
  },
  props: {
    visible: Boolean,
    id: String,
  },
  data() {
    
    return {
      loading: false,
			ruleForm: {
				inviteTime: null,
				inviteMin: null,
				inviteMax: null
			},
      rules: {
        inviteTime: [
          { required: true,message: '请输入时间（最少为60s）',trigger: 'blur' }
        ],
        inviteMin: [
          { required: true,message: '请输入数量',trigger: 'blur' }
        ],
        inviteMax: [
          { required: true,message: '请输入数量',trigger: 'blur' }
        ],
        customerAvatar: [
          { required: true,message: '请上传头像', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
   
  },
  created() {
    this.getInfo()
	},
  methods: {
    getInfo(){
      recordInfo().then(res => {
        this.ruleForm = res.result
      })
    },
    //新建子账号
    submitForm(formName) {
     
      
      this.$refs[formName].validate((valid) => {
        console.log('valid',valid)
        if (valid) {
            this.loading = true
            var data = {
            ...this.ruleForm
            }
            addRecord(data).then(res => {
              this.handleSuccess("操作成功")

            }).finally(() => {
              this.loading = false
            })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    
		//取消
    handleClose(formName) {
      this.$emit('update:visible', false)
			// this.$refs[formName].resetFields();
    },
		//确认
		handleConfirm(){
			this.$emit('success', '你好')
		},
    handleSuccess(msg) {
      if (msg === '已拒绝') {
        var type = 'error'
      } else {
        var type = 'success'
      }
      this.$message({
        message: msg,
        type: type,
        duration: 1500,
        onClose: () => {
          this.handleClose()
          this.$emit('success')
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
		padding: 0 !important;
  }
	::v-deep .ex--dialog--main {
    padding: 10px 20px !important;
  }
  ::v-deep .el-form-item__content{
    display: flex;
    justify-content: center;
  }
}

.inpList{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .hang{
     display: flex;
    justify-content: flex-start;
    align-items: center;  
  }
}
.mar-r-10{
  margin:  0 8px;
}
.el-input{
  width: 120px;
}
</style>